<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>echarts</title>
        <script src="js/vue.global.js"></script>
        <!-- 引入插件 -->
        <script src="js/echarts.min.js"></script>
    </head>
    <style>
        #chart1,#chart2,#chart3,#chart4,#chart5{
            width: 49%;
            height: 400px;
            border: 1px solid #000;
            display: inline-block;
        }

    </style>
    <body>
        <div id="app">
            <div id="chart1"></div>
            <div id="chart2"></div>
            <div id="chart3"></div>
            <div id="chart4"></div>
            <div id="chart5"></div>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {
                        
                    }
                },
                created(){
                    //this.drawChart()
                },
                mounted(){
                    this.drawChart()
                    this.drawChart2()
                    this.drawChart3()
                    this.drawChart4()
                    this.drawChart5()
                    window.onresize = () => {
        echarts.getInstanceByDom(document.getElementById('chart1')).resize();
        echarts.getInstanceByDom(document.getElementById('chart2')).resize();
        echarts.getInstanceByDom(document.getElementById('chart3')).resize();
        echarts.getInstanceByDom(document.getElementById('chart4')).resize();
        echarts.getInstanceByDom(document.getElementById('chart5')).resize();
    };
                },
                methods:{
                    drawChart(){  // 画图
                        var chartDom = document.getElementById('chart1');
                        var myChart = echarts.init(chartDom);
                        var option;  //配置选项

option = {
  title: {
    text: '主标题',
    subtext: '副标题',
    left: 'center',
    top: '10px',
    textStyle: {
      color: 'blue'
    }
  },
  legend: {  //图例
    data: ['甲订单量', '乙订单量'],
    show: true,
    left:"10px",
    top:"10px"
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {  //坐标轴线
      show: true,
      lineStyle:{
        color:"blue"
      }
    },
    axisTick: {  //刻度线
      show: true,
      lineStyle:{
        color:"red"
      }
    },
    axisLabel: {  //坐标轴标签
      color: "green"
    },
    splitLine:{  //分割线
      show: true,
      lineStyle:{
        color:"#999"
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {  //坐标轴线
      show: true,
      lineStyle:{
        color:"blue"
      }
    },
    axisTick: {  //刻度线
      show: true,
      lineStyle:{
        color:"red"
      }
    },
    axisLabel: {  //坐标轴标签
      color: "green"
    },
    splitLine:{  //分割线
      show: true,
      lineStyle:{
        color:"#999"
      }
    }
  },
  series: [
    {
      name: '甲订单量',
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      lineStyle:{
        color:"red"
      }
    },
    {
      name: '乙订单量',
      data: [120, 132, 101, 134, 90, 230, 210],
      type: 'line',
      smooth:true,
      lineStyle:{
        color:"blue"
      }
    }
  ]
};

option && myChart.setOption(option);
//窗口大小变化的时候，图标也变化
window.onresize=function(){
    myChart.resize()
}
                    },
                    drawChart2(){
                        var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: '#a90000'
          }
        },
        150,
        80,
        70,
        110,
        130
      ],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option);
window.onresize=function(){
    myChart.resize()
}
                    },
                    drawChart3(){
                        var chartDom = document.getElementById('chart3');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);
window.onresize=function(){
    myChart.resize()
}
                    },
                    drawChart4(){
                        var chartDom = document.getElementById('chart4');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};

option && myChart.setOption(option);
window.onresize=function(){
    myChart.resize()
}
                    },
                    drawChart5(){
                        
var chartDom = document.getElementById('chart5');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

option && myChart.setOption(option);
window.onresize=function(){
    myChart.resize()
}
                    }
                }
            }).mount('#app')
        </script>
    </body>
</html>